<template>
    <div class="app-container">
        <h2 align="center">外贸报价单</h2>
        <el-row :gutter="10" class="mb8">
            <el-col>
                <el-button
                  icon="el-icon-plus"
                  plain
                  size="mini"
                  type="primary"
                  @click="handleAdd">新增</el-button>
            </el-col>
        </el-row>
        <el-tooltip placement="top">
            <div slot="content">点击任意一行列，即可在下方查看销售报价单明细记录</div>
            <el-table :data="XSBJDData" v-loading="loading" @row-click="showTab" :row-class-name="rowClassName">
                <el-table-column label="报价日期" prop="BJRQ"/>
                <el-table-column label="有效期" prop="YXQ"/>
                <el-table-column label="运输方式" prop="YSFS"/>
                <el-table-column label="报价单号" prop="BJDH"/>
                <el-table-column label="报价员" prop="BJY"/>
                <el-table-column label="对应单号" prop="DYDH"/>
                <el-table-column label="付款方式" prop="FKFS"/>
                <el-table-column label="币种" prop="BZ"/>
                <el-table-column label="客户" prop="KH"/>
                <el-table-column label="港口" prop="GK"/>
                <el-table-column label="备注" prop="BZ"/>
                <el-table-column
                              align="center"
                              class-name="small-padding fixed-width"
                              fixed="right"
                              label="操作"
                              >
                              <template slot-scope="scope">
                                <el-button
                                  icon="el-icon-edit"
                                  size="mini"
                                  type="text"
                                  @click="handleUpdate(scope.row)"
                                  >修改</el-button>
                                  <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="text"
                                    @click="handleDelete(scope.row)"
                                    >删除</el-button>
                              </template>
                </el-table-column>
            </el-table>
        </el-tooltip>
        
        <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" />

      <!-- 添加或修改销售报价单对话框 -->
       <el-dialog
         :title="title"
         :visible.sync="open"
         append-to-body="append-to-body"
         width="1024px"
         >
        <el-form
          :model="XSBJDDialog"
          label-width="120px"
          >
        <el-row>
            <el-col :span="12">
                <el-form-item label="报价日期" prop="BJRQ">
            <el-date-picker type="date" placeholder="请选择报价日期" v-model="XSBJDDialog.BJRQ"></el-date-picker>
        </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="有效期" prop="YXQ">
            <el-date-picker type="date" placeholder="请选择有效期" v-model="XSBJDDialog.YXQ"></el-date-picker>
        </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="运输方式" prop="YSFS">
                    <el-select v-model="XSBJDDialog.YSFS" clearable placeholder="请选择运输方式" size="medium">
                            <el-option
                              v-for="dict in YSFSOptions"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"/>
                        </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="报价单号" prop="BJDH">
                    <el-input v-model="XSBJDDialog.BJDH" placeholder="请输入报价单号" clearable></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="报价员" prop="BJY">
                <el-select v-model="XSBJDDialog.BJY" clearable placeholder="请选择报价员" size="medium">
                            <el-option
                              v-for="dict in BJYOptions"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"/>
                        </el-select>
                    </el-form-item> 
            </el-col>
            <el-col :span="12">
                <el-form-item label="对应单号" prop="DYDH">
                <el-input v-model="XSBJDDialog.DYDH" clearable placeholder="请输入对应单号"></el-input>
            </el-form-item>
            </el-col>
            
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="付款方式" prop="FKFS">
                <el-select v-model="XSBJDDialog.FKFS" clearable placeholder="请选择付款方式" size="medium">
                            <el-option
                              v-for="dict in FKFSOptions"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"/>
                        </el-select>
                    </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="币种" prop="BZ">
                <el-select v-model="XSBJDDialog.BZ" clearable placeholder="请选择币种" size="medium">
                            <el-option
                              v-for="dict in BZOptions"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"/>
                        </el-select>
                    </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="客户" prop="KH">
                    <el-input v-model="XSBJDDialog.KH" clearable placeholder="请输入客户"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="港口" prop="GK">
                    <el-select v-model="XSBJDDialog.GK" clearable placeholder="请选择港口" size="medium">
                            <el-option
                              v-for="dict in GKOptions"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"/>
                        </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="备注" prop="BZ">
                    <el-input v-model="BZ" type="textarea" clearable placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
        </el-dialog>

        <el-tabs v-model="activeName" v-if="showCard">
            <el-tab-pane label="销售报价单明细" name="first">
                <h2 align="center">{{ BJDH }}销售报价单明细</h2>
                <el-row :gutter="10" class="mb8">
            <el-col>
                <el-button
                  icon="el-icon-plus"
                  plain
                  size="mini"
                  type="primary"
                  @click="handleAdd1">新增</el-button>
            </el-col>
        </el-row>
                <el-table :data="XSBJDMXData" border>
                    <el-table-column label="产品资料" align="center" width="200">
                        <el-table-column label="代号" prop="DH" align="center"></el-table-column>
                        <el-table-column label="名称" prop="MC" align="center"></el-table-column>
                        <el-table-column label="规格" prop="GG" align="center"></el-table-column>
                        <el-table-column label="英文名" prop="YWM" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="价格(RMB)" prop="JGRMB" align="center" width="100"></el-table-column>
                    <el-table-column label="价格(USD)" prop="JGUSD" align="center" width="100"></el-table-column>
                    <el-table-column label="最小起订量" prop="ZXQDL" align="center" width="100"></el-table-column>
                    <el-table-column label="图片" prop="TP" align="center" width="100">
                       <template slot-scope="scope">
                         <img :src="scope.row.TP" alt="" class="table-image"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="外箱尺寸(m)" prop="WXCC" align="center" width="100"></el-table-column>
                    <el-table-column label="装箱率" prop="ZXL" align="center" width="100"></el-table-column>
                    <el-table-column label="毛重" prop="MZ" align="center" width="100"></el-table-column>
                    <el-table-column label="净重" prop="JZ" align="center" width="100"></el-table-column>
                    <el-table-column label="备注" prop="BZ" align="center" width="200"></el-table-column>
                    <el-table-column
                              align="center"
                              class-name="small-padding fixed-width"
                              fixed="right"
                              label="操作"
                              width="150"
                              
                              >
                              <template slot-scope="scope">
                                <el-button
                                  icon="el-icon-edit"
                                  size="mini"
                                  type="text"
                                  @click="handleUpdate1(scope.row)"
                                  >修改</el-button>
                                  <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="text"
                                    @click="handleDelete(scope.row)"
                                    >删除</el-button>
                              </template>
                </el-table-column>
                </el-table>
                <el-dialog
                :title="title1"
         :visible.sync="open2"
         append-to-body="append-to-body"
         width="1024px">
                    <el-form :model="form" :rules="rules" ref="form" label-width="120px">
    <!-- 产品资料部分 -->
    <el-form-item label="产品资料" class="form-section-title"></el-form-item>
    
    <el-form-item label="代号" prop="DH">
      <el-input v-model="form.DH" placeholder="请输入产品代号"></el-input>
    </el-form-item>
    
    <el-form-item label="名称" prop="MC">
      <el-input v-model="form.MC" placeholder="请输入产品名称"></el-input>
    </el-form-item>
    
    <el-form-item label="规格" prop="GG">
      <el-input v-model="form.GG" placeholder="请输入产品规格"></el-input>
    </el-form-item>
    
    <el-form-item label="英文名" prop="YWM">
      <el-input v-model="form.YWM" placeholder="请输入产品英文名"></el-input>
    </el-form-item>
    
    <!-- 价格部分 -->
    <el-form-item label="价格(RMB)" prop="JGRMB">
      <el-input-number v-model="form.JGRMB" :min="0" :precision="2" placeholder="请输入人民币价格"></el-input-number>
    </el-form-item>
    
    <el-form-item label="价格(USD)" prop="JGUSD">
      <el-input-number v-model="form.JGUSD" :min="0" :precision="2" placeholder="请输入美元价格"></el-input-number>
    </el-form-item>
    
    <!-- 其他信息 -->
    <el-form-item label="最小起订量" prop="ZXQDL">
      <el-input-number v-model="form.ZXQDL" :min="1" placeholder="请输入最小起订量"></el-input-number>
    </el-form-item>
    
    <el-form-item label="产品图片" prop="TP">
      <el-upload
        action="https://your-upload-url.com"
        :show-file-list="false"
        :on-success="handleImageSuccess"
        :before-upload="beforeImageUpload">
        <img v-if="form.TP" :src="form.TP" class="form-image">
        <i v-else class="el-icon-plus form-image-uploader"></i>
      </el-upload>
    </el-form-item>
    
    <el-form-item label="外箱尺寸(m)" prop="WXCC">
      <el-input v-model="form.WXCC" placeholder="格式: 长x宽x高"></el-input>
    </el-form-item>
    
    <el-form-item label="装箱率" prop="ZXL">
      <el-input v-model="form.ZXL" placeholder="请输入装箱率"></el-input>
    </el-form-item>
    
    <el-form-item label="毛重(kg)" prop="MZ">
      <el-input-number v-model="form.MZ" :min="0" :precision="2" placeholder="请输入毛重"></el-input-number>
    </el-form-item>
    
    <el-form-item label="净重(kg)" prop="JZ">
      <el-input-number v-model="form.JZ" :min="0" :precision="2" placeholder="请输入净重"></el-input-number>
    </el-form-item>
    
    <el-form-item label="备注" prop="BZ">
      <el-input type="textarea" v-model="form.BZ" :rows="3" placeholder="请输入备注信息"></el-input>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="open2=false">提交</el-button>
      <el-button @click="open2=false">取消</el-button>
    </el-form-item>
  </el-form>
                </el-dialog>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return{
            title1:'',
            open2:false,
            //弹出层标题
            form: {
        DH: '',
        MC: '',
        GG: '',
        YWM: '',
        JGRMB: 0,
        JGUSD: 0,
        ZXQDL: 1,
        TP: '',
        WXCC: '',
        ZXL: '',
        MZ: 0,
        JZ: 0,
        BZ: ''
      },
            title:"",
            //是否显示弹出层
            open:false,
            //表单参数
            XSBJDDialog: {},
            showCard:true,
            BJDH:'',
            activeName:'first',
            XSBJDData:[{
                id:1,
                BJRQ:'2024-1-12',
                YXQ:'2024-3-3',
                YSFS:'海运',
                BJDH:'2482432783',
                BJY:'张颜颜',
                DYDH:'1347293421',
                FKFS:'银行卡支付',
                KH:'王强',
                GK:'宁波舟山港',
                BZ:'人民币'
            },{
                id:2,
                BJRQ:'2024-2-2',
                YXQ:'2024-3-13',
                YSFS:'航运',
                BJDH:'1740023804',
                BJY:'陈庆',
                DYDH:'3259327923',
                FKFS:'第三方支付',
                KH:'李飞飞',
                GK:'上海港',
                BZ:'人民币'
            },{
                id:3,
                BJRQ:'2024-3-1',
                YXQ:'2024-3-30',
                YSFS:'航运',
                BJDH:'1535935359',
                BJY:'田洋',
                DYDH:'9382794398',
                FKFS:'现金支付',
                KH:'万振',
                GK:'广州港',
                BZ:'人民币'
            }],
            XSBJDMXData:[{
                DH:'#18471',
                MC:'椭圆形圆盘',
                GG:'2.5*2.5*2.5',
                YWM:'Oval disc',
                JGRMB:'100000',
                JGUSD:'100000',
                ZXQDL:'1kg',
                TP:'https://img24.11467.com/2024/05-30/1064371449.jpg',
                WXCC:'12*12*12*12',
                ZXL:'80%',
                MZ:'0.5kg',
                JZ:'0.3kg',
                BZ:''
            },{
                 DH:'#42784',
                MC:'长方提手托盘',
                GG:'2*2*5*5',
                YWM:'Rectangular handle tray',
                JGRMB:'1100000',
                JGUSD:'1100000',
                ZXQDL:'1kg',
                TP:'https://img24.11467.com/2024/05-30/1064371449.jpg',
               WXCC:'10*10*10*10',
                ZXL:'80%',
                MZ:'0.5kg',
                JZ:'0.3kg',
                BZ:''
            },{
                 DH:'#42114',
                MC:'果篮',
                GG:'6*11*11',
                YWM:'Fruit basket',
                JGRMB:'100000',
                JGUSD:'100000',
                ZXQDL:'1kg',
                TP:'https://img24.11467.com/2024/05-30/1064371449.jpg',
               WXCC:'11*11*11*11',
                ZXL:'80%',
                MZ:'0.5kg',
                JZ:'0.3kg',
                BZ:''
            }],
            total:3,
            loading:false,
            queryParams: {
                pageNum:1,
                pageSize:10,
            },
            id:null,
        }
    },
    methods: {
        // 显示高亮
        rowClassName({ row }) {
          return row.id == this.id ? 'selected-row' : ''; // 判断是否选中
        },
        showTab(row) {
            this.id = row.id;
            this.BJDH = row.BJDH;
            this.showCard = true;
        },
        //新增按钮
        handleAdd() {
            this.open = true;
            this.title = "添加销售报价单";
            this.XSBJDDialog.BJRQ = '';
            this.XSBJDDialog.YXQ ='';
            this.XSBJDDialog.BJDH = '';
            this.XSBJDDialog.DYDH = '';
            this.XSBJDDialog.KH = '';
        },
        //修改按钮操作
        handleUpdate(row) {
            this.open = true;
            this.title = '修改销售报价单';
            this.XSBJDDialog.BJRQ = row.BJRQ;
            this.XSBJDDialog.YXQ = row.YXQ;
            this.XSBJDDialog.BJDH = row.BJDH;
            this.XSBJDDialog.DYDH = row.DYDH;
            this.XSBJDDialog.KH = row.KH;
        },
        //取消按钮
        cancel() {
            this.open = false;
        },
        //提交按钮
        submitForm() {
            this.open = false;
        },
        handleAdd1(){
            this.open2=true
            this.title1=`新增${this.BJDH}销售报价单明细`
        },
        handleUpdate1(){
            this.open2=true
            this.title1=`修改${this.BJDH}销售报价单明细`
        }
    }
}
</script>
<style>
.table-image {
  max-width: 100%; /* 使图片最大宽度为格子的宽度 */
  max-height: 100px; /* 限制图片最大高度为 100px，可根据需求调整 */
  object-fit: contain; /* 保持图片的纵横比，完整显示在格子内 */
}
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
.form-section-title {
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.form-image {
  width: 100px;
  height: 100px;
  display: block;
}

.form-image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 28px;
  color: #8c939d;
}

.form-image-uploader:hover {
  border-color: #409EFF;
}
</style>
